<template>
    <div class="guns-body">
        <!-- 搜索表单 -->
        <div class="block-interval">
            <a-card :bordered="false">
                <a-form layout="inline" :model="where">
                    <a-row>
                        <a-form-item label="图片名称:">
                            <a-input @keydown.enter="reload" placeholder="图片名称" v-model:value="where.style"
                                allow-clear />
                        </a-form-item>
                        <a-form-item label="状态:" name="status">
                            <a-select v-model:value="where.status" style="width:120px" placeholder="请选择状态" allow-clear>
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="Y">正常</a-select-option>
                                <a-select-option value="N">停用</a-select-option>
                            </a-select>
                        </a-form-item>
                        <a-form-item class="ele-text-center">
                            <a-space>
                                <a-button type="primary" @click="reload">查询</a-button>
                                <a-button @click="reset">重置</a-button>
                            </a-space>
                        </a-form-item>
                    </a-row>
                </a-form>
            </a-card>
        </div>

        <!-- 表格 -->
        <div>
            <a-card :bordered="false" class="table-height">
                <BasicTable :canResize="false" ref="tableRef" :api="fetchData" :where="where" :columns="columns"
                    showTableSetting rowKey="styleNo" :rowSelection="{
                        type: 'checkbox',
                        selectedRowKeys: checkedKeys,
                        onChange: onSelectChange,
                    }">
                    <!-- table上边工具栏 -->
                    <template #toolbar>
                        <div class="table-toolbar">
                            <a-space>
                                <a-button type="primary" @click="openAdd()">
                                    <template #icon>
                                        <plus-outlined />
                                    </template>
                                    <span>添加</span>
                                </a-button>
                            </a-space>
                        </div>
                    </template>

                    <template #bodyCell="{ column, record }">
                        <template v-if="column.dataIndex == 'style'">
                            <a @click="openEdit(record)">{{ record.style }}</a>
                        </template>

                        <!-- table列表状态栏 -->
                        <!-- Y：热门，N：不热门 -->
                        <template v-if="column.key === 'hotFlag'">
                            <a-switch checked-children="是" un-checked-children="否" default-checked
                                :checked="record.status === 'Y'" @change="(checked) => editHotFlag(checked, record)" />
                        </template>
                        <template v-else-if="column.key === 'filePreview'">
                            <a-image :width="30" :src="record.imageFileId" scale="0.5 0.5 1"
                                :preview-options="previewOptions" />
                        </template>
                        <!-- table操作栏按钮 -->
                        <template v-else-if="column.key === 'action'">
                            <a-space>
                                <a @click="openEdit(record)">编辑</a>
                                <a-divider type="vertical" />
                                <a-popconfirm title="确定启用此标签吗？" @confirm="updateStatus(record, 'Y')"
                                    v-if="record.newFlag === 'N'">
                                    <a>启用</a>
                                </a-popconfirm>
                                <a-popconfirm title="确定停用此标签吗？" @confirm="updateStatus(record, 'N')"
                                    v-if="record.newFlag === 'Y'">
                                    <a>停用</a>
                                </a-popconfirm>
                            </a-space>
                        </template>
                    </template>
                </BasicTable>
            </a-card>
        </div>

        <!-- 新增弹窗 -->
        <tagManagement-add v-model:visible="showAdd" @done="reloadupdte" :isUpdate="isUpdate" :data="current"
            :org-list="orgLists" />
    </div>
</template>

<script lang="ts" setup>
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref, createVNode } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import TagManagementAdd from './agentImageAdd.vue';
import { TagStyleInfoApi } from '/@/api/touch/tagStyle/TagStyleInfoApi';
import { message, Modal } from 'ant-design-vue';
import { itemProps } from '/@/components/Menu/src/props';
import { number } from 'vue-types';
import { Item } from 'ant-design-vue/lib/menu';
import { log } from 'node:console';

// 查询条件
const where = reactive({
    style: '',
    status: '',
    type: 'PIC',
});

const columns = ref<object[]>([
    {
        title: '编号',
        dataIndex: 'tagStyleNo',
    },
    {
        title: '图片名称',
        dataIndex: 'style',
    },

    {
        title: '关联智能体数量',
        dataIndex: 'relNum',
    },
    // {
    //     title: '图片',
    //     dataIndex: 'filePreview',
    // },
    {
        title: '创建时间',
        dataIndex: 'createTime',
    },
    {
        title: '状态',
        dataIndex: 'newFlag',
        customRender: function ({ text }) {
            if ('Y' === text) {
                return '正常';
            } else {
                return '停用';
            }
        },
    },
    {
        title: '操作',
        key: 'action',
        width: 280,
        align: 'center',
    },
]);

const previewOptions = ref({
    // 设置图片预览时的样式，包括宽度和高度
    style: {
        width: '800px', // 预览时的宽度
        height: '600px', // 预览时的高度
    },
});

// 多选选中列表
const checkedKeys = ref<Array<string | number>>([]);

// 当前行数据
const current = ref<any>(null);

// 是否显示新增弹框
const showAdd = ref<boolean>(false);
const isUpdate = ref<boolean>(false);

// 是否显示新增编辑弹框
const showEdit = ref<boolean>(false);

// ref
const tableRef = ref(null);

/**
 * 点击查询
 * @author: nxy
 * @Date: 2022-10-12 09:38:18
 */

const reloadupdte = () => {
    checkedKeys.value = [];
    tableRef.value.reload({ page: pageNo });
}
const reload = () => {
    checkedKeys.value = [];
    tableRef.value.reload({ page: 1 });

};


/* 

*/
let pageNo = ref(0)
const fetchData = async (params) => {
    const response = await TagStyleInfoApi.findPage({
        type: 'PIC',
        ...params
    })
    pageNo = response.pageNo

    return response
}
/**
 * 点击重置
 * @author: nxy
 * @Date: 2022-10-12 09:38:29
 */
const reset = () => {
    where.style = '';
    where.status = '';
    reload();
};
const orgLists = ref<any>([]);
// onMounted(async () => {
//   orgLists.value = await TagStyleInfoApi.tree();
// });

// 表格选中改变
const onSelectChange = (selectedRowKeys: (string | number)[]) => {
    checkedKeys.value = selectedRowKeys;
};

/**
 * 打开新增弹窗
 *
 * @author yxx
 * @date 2022/04/04 12:24
 */
const openAdd = () => {
    showAdd.value = true;
    isUpdate.value = false;
    current.value = {};
};

/**
 * 打开编辑弹窗
 *
 * @author fengshuonan
 * @date 2021/4/2 17:03
 */
const openEdit = (row) => {
    console.log('row', row);
    current.value = row;
    showAdd.value = true;
    isUpdate.value = true;
};

/**
 * 修改状态
 *
 */
const editHotFlag = async (checked: boolean, row: any) => {
    const id = row.id;
    // 标签状态：1-启用，2-禁用
    const hotFlag = checked ? 'Y' : 'N';
    let result = await TagStyleInfoApi.updateStatus({ id, hotFlag });
    console.log(result);
    //message.success(result.message);
    reload();
};

/**
 * 修改热门状态
 *
 */
const editNewFlag = async (checked: boolean, row: any) => {
    const id = row.id;
    // 职位状态：1-启用，2-禁用
    const newFlag = checked ? 'Y' : 'N';
    let result = await TagStyleInfoApi.updateStatus({ id, newFlag });
    console.log(result);
    // message.success(result.message);
    reload();
};

/**
 * 批量删除
 *
 */
// const removeBatch = () => {
//   showEdit.value = false;
//   if (!checkedKeys.value.length) {
//     message.error('请至少选择一条数据');
//     return;
//   }
//   Modal.confirm({
//     title: '提示',
//     content: '确定要删除选中的职位吗?',
//     icon: createVNode(ExclamationCircleOutlined),
//     maskClosable: true,
//     onOk: async () => {
//       let params = checkedKeys.value;
//       const result = await TagStyleInfoApi.batchDel({ ids: params });
//       message.success(result.message);
//       reload();
//     },
//   });
// };

const updateStatus = async (row: any, newFlag) => {
    const result = await TagStyleInfoApi.updateStatus({ tagStyleNo: row.tagStyleNo, newFlag: newFlag });
    message.success(result.message);


    reload();
};
const tableList1 = ref([])
const dataList = ref([
    {
        value: '1',
        lable: '1',
    },
    {
        value: '2',
        lable: '2',
    },
    {
        value: '3',
        lable: '3',
    },
    {
        value: '4',
        lable: '4',
    }
])
const dataList2 = ref([
    {
        value: '1',
        total: '1',
    },
    {
        value: '2',
        total: '2',
    },
    {
        value: '3',
        total: '3',
    },
    {
        value: '4',
        total: '4',
    }
])
dataList.value.forEach(item => {
    let list = {
        total: 1,
        number: '1'
    }
    tableList1.value.push(list)
})
dataList.value = tableList1.value
dataList.value.forEach(Itemone => {
    Itemone.total = 3
})
console.log(dataList.value[0].total, '222222222222');

console.log(tableList1.value[0].total, '222');




</script>
<style scoped>
:deep(.ant-image-preview-img-wrapper .ant-image-preview-img img) {
    max-width: 400px !important;
    max-height: 400px !important;
}
</style>